<template>
	<view class="container">
		<view class="video" v-html="videoHtml">
		</view>

		<view class="resource-selector">
			<view v-for="(item, index) in resources" :key="index" class="resource-item"
				:class="{ active: selectedIndex === index }" @click="selectResource(index)">
				{{ item.name }}
			</view>
		</view>
	</view>
</template>

<script>
	// //引入 hls与dplayer 用于解析播放视频 
	// import Hls from 'hls.js'
	// import Dplayer from 'dplayer'
	export default {
		computed: {
			videoHtml() {
				return `<video  autoplay loop muted controls="controls" width="100%" ><source src="${this.selectedResource}" ></video>`;
			}
		},
		data() {
			return {
				dp: {},
				selectedIndex: 0,
				selectedResource: "",
				resources: [{
						name: '资源1',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
					},
					{
						name: '资源2',
						url: 'http://220.161.87.62:8800/hls/0/index.m3u8'
					},
					{
						name: '资源3',
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'
					}
				]
			}
		},
		// mounted() {
		// 	this.dp = new Dplayer({
		// 		//播放器的一些参数
		// 		container: document.getElementById('dplayer'),
		// 		autoplay: false, //是否自动播放
		// 		theme: '#FADFA3', //主题色
		// 		loop: true, //视频是否循环播放
		// 		lang: 'zh-cn',
		// 		screenshot: false, //是否开启截图
		// 		hotkey: true, //是否开启热键
		// 		preload: 'auto', //视频是否预加载
		// 		volume: 0.7, //默认音量
		// 		mutex: true, //阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
		// 		video: {
		// 			url: 'http://220.161.87.62:8800/hls/0/index.m3u8', //视频地址
		// 			type: 'customHls',
		// 			customType: {
		// 				customHls: function(video, player) {
		// 					const hls = new Hls() //实例化Hls  用于解析m3u8
		// 					hls.loadSource(video.src)
		// 					hls.attachMedia(video)
		// 				}
		// 			},
		// 		},
		// 	});
		// },

		methods: {
			selectResource(index) {
				this.selectedIndex = index;
				this.selectedResource = "http://222.134.15.58:83/openUrl/qwqodgc/live.m3u";
				console.log(this.selectedResource, ' selectedResource')
				// 在这里根据 selectedResource.url 切换视频资源
				// 例如，使用 DPlayer 的 reload 方法重新加载视频
			},



		},


	}
</script>
<style scoped lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		width: 100%;

		.video {
			padding: 96rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.resource-selector {
		display: flex;
		padding: 48rpx;
		align-items: center;
		justify-content: center
	}

	.resource-item {
		flex: 1;
		text-align: center;
		padding: 24rpx;
		cursor: pointer;
		background-color: #fff;
		margin: 0 20rpx;
		border-radius: 25rpx;
	}

	.resource-item.active {
		background-color: #ccc;
	}
</style>